import HomeSwiper from "../home_swiper/HomeSwiper";
import axios from "axios";
import render from "@u/render";
import "./HomeHero.scss";


export default (() => {

    let homeHeroContainer = document.createElement("div")

    homeHeroContainer.classList.add("home-hero-container", "auto");

    (async () => {
        const res = await axios.get("http://localhost:9000/api/homehero")
        const { chanel_list, category_list, category_list: category_list_site } = res.data

        let html = render(
            {
                category_list_site,
                category_list,
                chanel_list
            },
            {
                category_list_site: `<li categoryid="{{i.categoryId}}"><a href="javascript:void(0)">{{i.categoryName}}</a><i class="iconfont icon-youjiantou"></i></li>`,
                category_list: (data) => {
                    let temp = ``
                    return data.map(i => {
                        temp = `<div class="category-item" categoryid="${i.categoryId}">`
                        temp += i.data.map(i => `<li><a href="javascript:void(0)"><img src="${i.imgSrc}"></img><span>${i.name}</span></a></li>`).join("")
                        return temp += '</div>'
                    }).join("")
                },
                chanel_list: `<a href="javascript:void(0)"><img src="{{i.imgSrc}}"></img>{{i.text}}</a>`
            },
            `
                <div class="site-category">{{category_list_site}}</div>
                {{category_list}}
                <div class="home-hero-footer">
                    <div class="span4">
                        {{chanel_list}}
                    </div>
                    <div class="span16">
                            <a href="javascript:void(0)"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d8a6d6d37904e22c72130e3e4ec79b41.jpg?w=632&h=340"></img></a>
                            <a href="javascript:void(0)"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0bdb0b3ff4e73fe2a6bf2f8fd399015e.png?w=632&h=340"></img></a>
                            <a href="javascript:void(0)"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/35b3f906861db9d6472206e6d68318d9.jpeg?w=632&h=340"></img></a>
                    </div>
                </div>
            `
        )

        homeHeroContainer.innerHTML = html


        const siteCate = homeHeroContainer.querySelector(".site-category")
        const cateItems = homeHeroContainer.querySelectorAll(".category-item")

        let preActiveItem = null
        let preActiveSite = null

        siteCate.addEventListener("mouseover", function (e) {

            const { target } = e;

            const li = target.parentNode.nodeName === 'LI' ? target.parentNode : target;

            if (preActiveSite && preActiveSite !== li) {
                preActiveSite.classList.remove("active")
            }

            li.classList.add("active")

            const id = li.getAttribute("categoryid")

            let newItem = [...cateItems].filter(i => i.getAttribute("categoryid") === id)[0]

            if (preActiveItem !== null) {
                if (preActiveItem === newItem) {
                    preActiveItem.style.display = 'flex'
                    return
                }
                preActiveItem.style.display = 'none';
                preActiveItem.onmouseleave = null
                preActiveItem.onmouseenter = null
            }

            preActiveItem = newItem

            newItem.style.display = 'flex'

            preActiveSite = li

            preActiveItem.addEventListener("mouseleave", function (e) {
                preActiveItem.style.display = 'none'
                preActiveSite.classList.remove("active")
            })

            preActiveItem.addEventListener("mouseenter", function (e) {
                preActiveItem.style.display = 'flex'
                preActiveSite.classList.add("active")
            })

        })

        siteCate.addEventListener("mouseleave", function (e) {
            preActiveSite.classList.remove("active");
            preActiveItem.style.display = 'none'
        })

        homeHeroContainer.appendChild(HomeSwiper)
    })()


    return homeHeroContainer

})()